{extend name="platform/new_base" /}
{block name="resources"/}
<link rel="stylesheet" href="PLATFORM_NEW_CSS/wx_menu.css">
{/block}
{block name="main"}

<div>
                    <div class="menu_initial_box js_startMenuBox" style="display: none;">
                        <p class="tips_global">你尚未添加任何菜单</p>
                        <a class="btn btn_primary btn_add js_openMenu" href="javascript:void(0);">
                        <i class="icon14_common add_white"></i>添加菜单</a>
                    </div>
<!-- 菜单编辑 -->
<div class="menu_setting_area js_editBox" >
    <div class="menu_preview_area">
        <div class="mobile_menu_preview">
            <div class="mobile_hd tc">{$mall_name}</div>
            <div class="mobile_bd">
                <!-- 菜单 -->
                <ul class="pre_menu_list grid_line" id="menuList">
                                        <!-- 加载菜单 -->
                    {foreach name="menu_list" item="menu" key="k"}
                    <li class="pre_menu_item size1of{$class_index+1}  {if condition='($k+1)==$menu_list_count'} current{/if}" data-menu-index="{$k+1}">
                    
                        <!-- 一级菜单 -->
                        <a href="javascript:void(0);" ondragstart="return false" class="pre_menu_link jsMenu" data-menuid="{$menu.menu_id}" data-pid="0" data-menu-eventurl = "{$menu.menu_event_url}" data-menu-type = "{$menu.menu_event_type}" data-detault-menu-type = "{$menu.menu_event_type}" data-mediaid="{$menu.media_id}" data-sort="{$menu.sort}">

                            {if condition = "$menu.child_count > 0"}                           <!-- 有二级菜单，显示小图标 -->
                            <i class="icon_menu_dot js_icon_menu_dot dn"></i>
                            {/if}
                                                        <span>{$menu.menu_name}</span>
                        </a>
                        <!-- 一级菜单 -->
                        
                        
                        <!-- 二级菜单 -->
                        <div class="sub_pre_menu_box" data-submenulist="{$k+1}" {if condition="($k+1)!=$menu_list_count"}style="display: none;"{/if} >
                            <ul class="sub_pre_menu_list">
                                {foreach name="menu.child" item="sub_menu"}
                                                            <li class="jsSubMenuInner"  {if $sub_menu.menu_event_type=='2'}data-flag=1{/if} {if $sub_menu.menu_event_type==3}data-flag=3{/if} {if $sub_menu.menu_event_type=='4'} data-flag=4 {/if}{if $sub_menu.menu_event_type=='1'} data-flag=2 {/if} >
                                    <a href="javascript:void(0);" ondragstart="return false" data-pid="{$sub_menu.pid}" data-menuid="{$sub_menu.menu_id}" data-menu-eventurl="{$sub_menu.menu_event_url}" data-menu-type = "{$sub_menu.menu_event_type}" data-detault-menu-type = "{$sub_menu.menu_event_type}" data-mediaid="{$sub_menu.media_id}" data-sort="{$sub_menu.sort}">
                                        <span class="sub_pre_menu_inner">{$sub_menu.menu_name}</span>
                                    </a>
                                </li>
                                {/foreach}
                                                    <!-- 限制二级菜单数量的添加 -->
                                <li class="jsSubMenu" data-pid="{$menu.menu_id}" data-subindex="{$k+1}" {if condition = "$menu.child_count == $MAX_SUB_MENU_LENGTH"}style="display:none;"{/if}>
                                    <a href="javascript:void(0);" title="最多添加{$MAX_SUB_MENU_LENGTH}个子菜单">
                                        <span class="sub_pre_menu_inner">
                                            <i class="icon14_menu_add" style="background-position: 0 0;"></i>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                            <i class="arrow arrow_out"></i> <i class="arrow arrow_in"></i><!-- 箭头 -->
                        </div>
                        <!-- 二级菜单 -->
                        
                        
                    </li>
            {/foreach}


                    
                    <!-- 限制一级菜单数量的添加 -->
                    <li class="js-addMenuBtn pre_menu_item size1of{$class_index+1}"  data-class-index="{$class_index+1}" {if condition = "$menu_list_count >= $MAX_MENU_LENGTH"} style="display:none;"{/if} >
                        <a href="javascript:void(0);" class="pre_menu_link " title="最多添加{$MAX_MENU_LENGTH}个一级菜单">
                            <i class="icon14_menu_add"></i>
                            {if condition="$menu_list_count==0"}
                            <span>添加菜单</span>
                            {/if}
                                                    </a>
                    </li>
                    
                    
                </ul>
                <!-- 菜单 -->
            </div>
        </div>

        <div class="sort_btn_wrp" {if condition="$menu_list_count == 0"}style="display:none;"{/if}>
            <a id="orderBt" class="{if condition='$menu_list_count <2'} dn {/if}btn btn_default" href="javascript:void(0);">菜单排序</a>
            <span id="orderDis" class="{if condition='$menu_list_count >1'} dn {/if}btn btn_disabled">菜单排序</span>
            <a id="finishBt" href="javascript:void(0);" class="dn btn btn_default">完成</a>
        </div>
        
        
    </div>


    <div class="menu_form_area">
        <!-- 点击左侧菜单进行编辑操作 -->
        <div id="js_none" class="menu_initial_tips tips_global" style="display: none;">请通过拖拽左边的菜单进行排序</div>
        <div id="js_rightBox" class="portable_editor to_left">
            <div class="editor_inner">
                <div class="global_mod float_layout menu_form_hd js_second_title_bar">
                    <h4 class="global_info">{$default_menu_info.menu_name}</h4>
                    <div class="global_extra">
                        <a href="javascript:void(0);" id="jsDelBt" data-menuid="{$default_menu_info.menu_id}" data-menuname="{$default_menu_info.menu_name}">删除菜单</a>
                    </div>
                </div>
                <div class="menu_form_bd" id="view">
                    <div id="js_innerNone"  class="msg_sender_tips tips_global" {if condition="$default_menu_info.child_count==0"}style="display: none;"{/if}>已添加子菜单，仅可设置菜单名称。</div>
                    <div class="frm_control_group js_setNameBox">
                        <label for="menuname" class="frm_label"><strong class="title js_menuTitle">菜单名称</strong></label>
                        <div class="frm_controls">
                            <span class="frm_input_box with_counter counter_in append">
                                <input type="text" id="menuname"  data-switch="menuname" class="frm_input" value="{$default_menu_info.menu_name}">
                            </span>
                            <p class="emoji" style="margin-top: -10px;"><a class="select_emoji btn btn-primary">选择表情</a></p>
                            <p class="frm_msg fail js_titleEorTips dn" style="display: none;">字数超过上限</p>
                            <p class="frm_msg fail js_titlenoTips dn" style="display: none;">请输入菜单名称</p>
                            <p class="frm_tips js_titleNolTips">一级菜单不能超过5个字数</p>
                        </div>
                    </div>
                    <div class="frm_control_group js_setGraphic" {if condition="$default_menu_info.child_count>0"}style="display:none;"{/if}>
                        <label for="" class="frm_label"> <strong class="title js_menuContent">菜单内容</strong></label>
                        <div class="frm_controls frm_vertical_pt">
                            <label class="frm_radio_label js_radio_sendMsg {if condition='$default_menu_info.menu_event_type==2'}selected{/if}">
                                <i class="icon_radio"></i> <span class="lbl_content">微信素材</span>
                            </label>
                            <label class="frm_radio_label js_radio_url  {if condition='$default_menu_info.menu_event_type==1'}selected{/if}">
                                <i class="icon_radio"></i> <span class="lbl_content">跳转网页</span>
                            </label>
                            <label class="frm_radio_label js_text {if condition='$default_menu_info.menu_event_type==3'}selected{/if}">
                                <i class="icon_radio"></i> <span class="lbl_content " >文本消息</span>
                            </label>
                            <label class="frm_radio_label js_miniprogram {if condition='$default_menu_info.menu_event_type==4'}selected{/if}">
                                <i class="icon_radio"></i> <span class="lbl_content " >小程序</span>
                            </label>
                            <label class="frm_radio_label js_key {if condition='$default_menu_info.menu_event_type==5'}selected{/if}">
                                <i class="icon_radio"></i> <span class="lbl_content " >触发关键字</span>
                            </label>
                        </div>
                    </div>
                    <div class="menu_content_container js_setGraphic" {if condition="$default_menu_info.child_count>0"}style="display:none;"{/if}>
                        <!-- 发送消息 -->
                        
                        <div class="menu_content send jsMain" id="edit"  {if condition='$default_menu_info.menu_event_type==2'} style="display: block;"{else} style="display:none;"{/if}>
                            <div class="msg_sender" id="editDiv">
                                <div class="msg_tab">
                                    <div class="tab_navs_panel">
                                        <div class="tab_navs_wrp">

                                        </div>
                                    </div>
                                    <div class="tab_panel">

                                        <div class="tab_content">
                                            <div class="js_appmsgArea inner ">
                                            
                                                
                                                <div class="tab_cont_cover jsMsgSendTab" {if condition = "$default_menu_info.menu_event_type==2"}style="display:block;"{/if} >
                                                    <div class="media_cover">
                                                        <span class="create_access selectMedia">
                                                            <a class="add_gray_wrp jsMsgSenderPopBt" href="javascript:void(0);">
                                                            <i class="icon36_common add_gray"></i> <strong>从素材库中选择</strong>
                                                        </a>
                                                        </span>
                                                    </div>

                                                </div>

                                                <div id="show_media" class=" w-200 fs-12" data-uuu=" {$default_menu_info.media_list.type}" {if condition = "$default_menu_info.menu_event_type==2"}style="display:block;"{else}style="display:none;"{/if}>
                                                        {if $default_menu_info.media_list.type == 'news'}
                                                        <div class="padding-10 imagesTexts">
                                                            <div class="item-head">
                                                                <img src="{$default_menu_info.media_list.items["data"][0]["thumb_url"]}" class="max-w-auto">
                                                                <p class="line-1-ellipsis">{$default_menu_info.media_list.items.data.0.title}</p>
                                                            </div>
                                                        </div>
                                                        {if condition = "$default_menu_info.media_list.item_list_count >1"}
                                                        {foreach name = "$default_menu_info.media_list.items.data" key="k"  item="media"}
                                                        {if $k>0}
                                                            <div class="padding-10 imagesTexts">
                                                                <div class="item">
                                                                    <p class="line-2-ellipsis">{$media.title}</p>
                                                                    <img src="{$media.thumb_url}">
                                                                 </div>
                                                            </div>
                                                        {/if}
                                                        {/foreach}
                                                        {/if}
                                                        <div class="border-top flex-auto-center text-center">
                                                            <a href="javascript:void(0);" class="flex-1 btn jsmsgSenderDelBt link_dele" data-mediaid="{$default_menu_info.media_id}">删除</a>
                                                        </div>
                                                        {/if}
                                                        {if $default_menu_info.media_list.type == 'image'}
                                                        <div class="padding-10 imagesTexts">
                                                            <div class="item-head">
                                                                <img src="{$default_menu_info.media_list.["attachment"]}" class="max-w-auto">
                                                                <p class="line-1-ellipsis">图片：{$default_menu_info.media_list.filename}</p>
                                                            </div>
                                                        </div>
                                                        <div class="border-top flex-auto-center text-center">
                                                            <a href="javascript:void(0);" class="flex-1 btn jsmsgSenderDelBt link_dele" data-mediaid="{$default_menu_info.media_id}">删除</a>
                                                        </div>
                                                        {/if}
                                                        {if $default_menu_info.media_list.type == 'voice'}
                                                        <div class="padding-10 imagesTexts">
                                                            <div class="item-head">
                                                                <img src="https://mmbiz.qpic.cn/mmbiz/YibJtXWD7LA4VPpxZarEKLHCVq3kVyCbGIPyXFPD9ic1AI7D0zw2IibDmvCoZVHln7eD7ZdcnnLDpbeurkIm6JAQw/0?wx_fmt=jpeg" class="max-w-auto">
                                                                <p class="line-1-ellipsis">语音：{$default_menu_info.media_list.filename}</p>
                                                            </div>
                                                        </div>
                                                        <div class="border-top flex-auto-center text-center">
                                                            <a href="javascript:void(0);" class="flex-1 btn jsmsgSenderDelBt link_dele" data-mediaid="{$default_menu_info.media_id}">删除</a>
                                                        </div>
                                                        {/if}
                                                        {if $default_menu_info.media_list.type == 'video'}
                                                        <div class="padding-10 imagesTexts">
                                                            <div class="item-head">
                                                                <img src="https://mmbiz.qpic.cn/mmbiz/YibJtXWD7LA4VPpxZarEKLHCVq3kVyCbGIPyXFPD9ic1AI7D0zw2IibDmvCoZVHln7eD7ZdcnnLDpbeurkIm6JAQw/0?wx_fmt=jpeg" class="max-w-auto">
                                                                <p class="line-1-ellipsis">视频：{$default_menu_info.media_list.tag.title}</p>
                                                            </div>
                                                        </div>
                                                        <div class="border-top flex-auto-center text-center">
                                                            <a href="javascript:void(0);" class="flex-1 btn jsmsgSenderDelBt link_dele" data-mediaid="{$default_menu_info.media_id}">删除</a>
                                                        </div>
                                                        {/if}

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 发送消息 -->
                        
                        <!-- 跳转网页 -->
                        
                        <div class="menu_content url jsMain" id="url"  {if condition='$default_menu_info.menu_event_type == 1'} style="display: block;"{else} style="display:none;"{/if}>
                                <p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下链接</p>
                                <div class="frm_control_group">
                                    <label for="urltext" class="frm_label"><strong class="title">页面地址</strong></label>
                                    <div class="frm_controls">
                                        <span class="frm_input_box" style="width: 210px;">
                                            <input type="text" class="frm_input" id="urltext" data-switch="url" value="{$default_menu_info.menu_event_url}" name="urlText" style="border: 0; box-shadow: none; padding: 0;">
                                            
                                        </span>
                                        <a class="select_url btn btn-primary">选择链接</a>
                                    </div>
                                </div>
                        </div>
                        <!--文本消息-->
                         <div class="menu_content textNew jsMain" id="textNew"  {if condition='$default_menu_info.menu_event_type == 3'} style="display: block;"{else} style="display:none;"{/if}>
                            <p class="menu_content_tips tips_global">客服文本消息，可插入链接。</p>
                            <textarea name="" id="newArea" class="form-control" cols="60" rows="5">{$default_menu_info.media_list.attachment}</textarea>
                            <div class="text_border">
                                <a href="javascript:void(0);" class="text_select_emoji"><i class="icon icon-emoji"></i></a>
                                <a href="javascript:void(0);" class="link_dia"><i class="icon icon-link-l"></i></a>
                            </div>
                            <!--<div class="mt-10">-->
                                    <!--<a class="btn btn-primary addText" href="javascript:void(0);">保存</a>-->
                            <!--</div>-->
                         </div>
                        <!--文本消息-->
                        <!--关键字-->
                        <div class="menu_content url jsMain" id="key"  {if condition='$default_menu_info.menu_event_type == 5'} style="display: block;"{else} style="display:none;"{/if}>
                        <p class="menu_content_tips tips_global">请选择需要触发的关键字，该关键字必须已经在系统中创建。</p>
                        <div class="frm_control_group">
                            <label for="urltext" class="frm_label"><strong class="title">关键字</strong></label>
                            <div class="frm_controls">
                                   <span class="frm_input_box" style="width: 210px;">
                                    <input type="text" class="frm_input" id="keyword" disabled data-switch="key" value="{if $default_menu_info.key_name}{$default_menu_info.key_name}{/if}" name="urlText" style="border: 0; box-shadow: none; padding: 0;">
                                   </span>
                                <a class="select_key btn btn-primary">选择关键字</a>
                            </div>
                        </div>
                        </div>
                        <!--小程序-->
                        <div class="menu_content textNew jsMain" id="miniprogram"  {if condition='$default_menu_info.menu_event_type == 4'} style="display: block;"{else} style="display:none;"{/if}>
                        <p class="menu_content_tips tips_global">若商城已对接小程序，可直接获取商城小程序AppID与路径。{if $miniprogramStatus}<a href="{:__URL('ADDONS_MAINminiProgramManage')}" target="_blank">前往对接</a>{/if}</p>
                        <div class="frm_control_group">
                            <label for="miniprogram" class="frm_label"><strong class="title">小程序AppID</strong></label>
                            <div class="frm_controls">
                                     <span class="frm_input_box" style="width: 210px;">
                                     <input type="text" class="frm_input" id="appidminiprogram" data-switch="appid" value="{$default_menu_info.appid}" name="appidminiprogram"  style="border: 0; box-shadow: none; padding: 0;">
                                      </span>
                                {if $miniprogramStatus}
                                      <a class="getMinConfig btn btn-primary">获取小程序AppID</a>
                                {/if}
                            </div>
                        </div>
                        <div class="frm_control_group">
                        <label for="miniprogram" class="frm_label"><strong class="title">小程序路径</strong></label>
                        <div class="frm_controls">
                                    <span class="frm_input_box" style="width: 210px;">
                                    <input type="text" class="frm_input" id="urlminiprogram" data-switch="url" value="{$default_menu_info.menu_event_url}" name="urlminiprogram" style="border: 0; box-shadow: none; padding: 0;">
                                    </span>
                            {if $miniprogramStatus}
                                    <a class="select_min_url btn btn-primary">选择路径</a>
                            {/if}
                        </div>
                        </div>
                        <div class="mt-10">
                            <a class="btn btn-primary addminiprogram" href="javascript:void(0);">保存</a>
                        </div>
                        </div>
                        <!--小程序-->
                        <div id="js_errTips" style="display: none;" class="msg_sender_msg mini_tips warn"></div>
                    </div>
                </div>
            </div>
        
            <input type="hidden" id="authorizer_appid" value="{$authorizer_appid}">
            <span class="editor_arrow_wrp">
                <i class="editor_arrow editor_arrow_out"></i>
                <i class="editor_arrow editor_arrow_in"></i>
            </span>
            
     
            
        </div>
        <!-- 点击左侧菜单进行编辑操作 -->

<!-- 菜单编辑 -->

<div class="tool_bar tc js_editBtn" >
    <span id="pubBt" class="btn btn_input btn_primary"><button>保存并发布</button></span>
    <a href="javascript:void(0);" class="btn btn_default" id="viewBt" style="display: inline-block;">预览</a>
</div>


<!-- 删除菜单弹出框 -->

<div class="dialog_wrp  ui-draggable" style="display: none;" id="wxDelDialog">
    <div class="dialog">
        <div class="dialog_hd">
            <h3>温馨提示</h3>
            <a href="javascript:void(0);" class="pop_closed">关闭</a>
        </div>
        <div class="dialog_bd">
            <div class="page_msg large simple default ">
                <div class="inner group">
                    <span class="msg_icon_wrapper"><i class="icon_msg warn "></i></span>
                    <div class="msg_content ">
                        <h4>删除确认</h4>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="dialog_ft">
            <a href="javascript:void(0);" class="btn btn_primary js_btn">确定</a> <a
                href="javascript:void(0);" class="btn btn_default js_btn">取消</a>
        </div>
    </div>
</div>

<!-- 删除菜单弹出框 -->


<!-- 手机预览 -->
<div class="mobile_preview" id="mobileDiv" style="display: none;">
    <div class="mobile_preview_hd">
        <strong class="nickname">{$wx_name}</strong>
    </div>
    <div class="mobile_preview_bd">
        <ul id="viewShow" class="show_list"></ul>
    </div>
    <div class="mobile_preview_ft">
        <ul class="pre_menu_list grid_line" id="viewList">
            {foreach name="menu_list" item="menu" key="k"}
                        <li class="pre_menu_item grid_item size1of{$menu_list_count}" data-mobile-menu-index="{$k+1}">
                <a href="javascript:void(0);" class="jsView pre_menu_link" title="{$menu.menu_name}" data-menuid="{$menu.menu_id}">
                <i class="icon_menu_dot"></i>{$menu.menu_name}</a>
                <div class="sub_pre_menu_box jsSubViewDiv" data-subIndex="{$k+1}" style="display: none">
                    <ul class="sub_pre_menu_list">
                        {foreach name="menu.child" item="sub_menu"}
                                                <li>
                            <a href="javascript:void(0);" data-pid="{$sub_menu.pid}" data-menuid="{$sub_menu.menu_id}" class="jsSubView" title="{$sub_menu.menu_name}">{$sub_menu.menu_name}</a>
                        </li>
                        {/foreach}
                                            </ul>
                    <i class="arrow arrow_out"></i><i class="arrow arrow_in"></i>
                </div>
            </li>
            {/foreach}
                    </ul>
    </div>
    <a href="javascript:void(0);" class="mobile_preview_closed btn btn_default" id="viewClose">退出预览</a>
</div>

<!-- 遮罩层 -->
<div class="mask" style="display: none;" id="maskLayer"></div>

<!-- 操作反馈弹出框 erro 失败-->
<div class="JS_TIPS page_tips success" id="wxTips" style="display:none;">
    <div class="inner"></div>
</div>

<input type="hidden" id="hidden_default_sort" />
<input type="hidden" id="hidden_default_sub_sort" />




</div>

                <!-- page end -->
            </div>
        </div>
{/block}
{block name="script"}
<script>
   require(['util','wxMenu'],function(util,wxMenu){
   })

</script>
{/block}